<ion-header>

  <ion-navbar [style.display]="navDisplay" color="primary">
    <ion-title>Content #{{chapter?.number}}</ion-title>

    <ion-buttons end>
      <button ion-button icon-only (tap)="prevChapter()" *ngIf="chapter?.number > 1">
        <ion-icon name="rewind"></ion-icon>
      </button>
      <button ion-button icon-only (tap)="nextChapter()">
        <ion-icon name="fastforward"></ion-icon>
      </button>
      <button ion-button icon-only (tap)="openSettingsModal()" color="secondary">
        <ion-icon name="color-palette"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding id="chapter-page" (tap)="toggleNavBar($event)">
  <ln-chapter-reader
    [(chapter)]="chapter"
    [novelId]="novelId"
    [fontSize]="settings?.fontSize"
    [brightness]="settings?.brightness"
    [horizontalScrolling]="settings?.horizontalScrolling"
    [invertColors]="settings?.invertColors"
    [autoScrollEnabled]="autoScrollEnabled"
    [autoScrollSpeed]="settings?.autoScrollSpeed"
    [isFromNextChapter]="isFromNextChapter"
    [isFromPreviousChapter]="isFromPreviousChapter"
  ></ln-chapter-reader>
  <div class="bottom-nav" *ngIf="chapter">
    <button class="prev" ion-button clear icon-right (tap)="prevChapter()">
      <ion-icon name="ios-arrow-back"></ion-icon>
      Back 
    </button>
    <button class="next" ion-button clear icon-left (tap)="nextChapter()">
      Next 
      <ion-icon name="ios-arrow-forward"></ion-icon>
    </button>
  </div>
</ion-content>

<ion-fab bottom right [style.visibility]="autoScrollShown ? 'visible' : 'hidden'">
  <button ion-fab color="secondary" (click)="toggleAutoScroll()">
    <ion-icon [name]="autoScrollIcon"></ion-icon>
  </button>
</ion-fab>